import React, {PureComponent} from 'react';
import {
    View,
    Text,
    ScrollView,
    Image,
    TextInput,
    StyleSheet,
    TouchableOpacity,
    Dimensions
} from 'react-native';
const {width,height}=Dimensions.get('window');
export default class Login extends PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            userNameText: 'primeton',
            passwordText: 'primeton',
            isSecureTextEntry: true,
            keyboardHeight: ''
        }
    }
    /**
     * 登陆方法
     */
    login=()=>{
        if (!this.state.userNameText) {
            alert('用户名不能为空')
            return;
        }
        if (!this.state.passwordText) {
            alert('密码不能为空')
            return;
        }
        if (this.state.userNameText == 'primeton' && this.state.passwordText == 'primeton') {
            //登陆成功跳转主页面
            this.props.navigation.push("HomePage");
        }
    }
    render() {
        return (
            <ScrollView contentContainerStyle={styles.container}>
                <View style={styles.userNameView}>
                    <Image style={styles.iconImage} source={require('../../images/userName.png')}/>
                    <TextInput
                        style={styles.textInput}
                        value={this.state.userNameText}
                        onChangeText={(text) => {
                            this.setState({userNameText: text})
                        }}
                        placeholder={'请输入用户名'}
                        placeholderTextColor={'#a4b0b2'}
                        underlineColorAndroid={'transparent'}
                    />
                </View>
                <View style={styles.baseLine}/>
                <View style={[styles.userNameView,{marginTop: 30,}]}>
                    <Image style={styles.iconImage} source={require('../../images/password.png')}/>
                    <TextInput
                        style={styles.textInput}
                        value={this.state.passwordText}
                        onChangeText={(text) => {
                            this.setState({passwordText: text})
                        }}
                        placeholder={'请输入密码'}
                        placeholderTextColor={'#a4b0b2'}
                        underlineColorAndroid={'transparent'}
                        secureTextEntry={this.state.isSecureTextEntry}
                    />
                    {/* <Image
                        style={[styles.iconImage, {marginRight: 20}]}
                        source={this.state.isSecureTextEntry ? require('../../images/display.png') : require('../../images/hide.png')}
                        onTouchEnd={() => {
                            this.setState({isSecureTextEntry: !this.state.isSecureTextEntry})
                        }}/> */}
                </View>
                <View style={styles.baseLine}/>
                <TouchableOpacity style={styles.loginButton} onPress={this.login}>
                    <Text style={styles.loginButtonText}>
                        登 录
                    </Text>
                </TouchableOpacity>
            </ScrollView>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        width: width,
        height: height,
        justifyContent: 'center',
        alignItems: 'center',
    },
    userNameView:{
        flexDirection: 'row',
        alignItems: 'center',
    },
    iconImage: {
        width: 25,
        height: 25,
        marginRight: 10,
        marginLeft: 20
    },
    textInput: {
        fontSize: 16,
        color: "#364153",
        textAlignVertical: 'center',
        includeFontPadding: false,
        flex: 1,
    },
    loginButton: {
        width: width * 0.9,
        height: 40,
        backgroundColor: '#0054a5',
        borderWidth: 1,
        borderRadius: 20,
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 30
    },
    loginButtonText: {
        fontSize: 20,
        color: '#fff'
    },
    forgetPasswordText: {
        fontSize: 16,
        color: '#5d7def'
    },
    baseLine: {
        height: 2,
        width: width * 0.9,
        backgroundColor: '#DCDCDC',
        marginTop: 5,
    },

});